<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>图片轮换</title>
	<style type="text/css">
	*{margin:0;padding: 0;}
	li{list-style-type: none;}
	.wap{margin: 0 auto;margin-top:50px;width: 620px;height: 340px;position: relative;overflow: hidden;border:1px solid #ccc;cursor: pointer;}
	.wap ul{width: 2480px;position: absolute;top: 0;left: 0;}
	.wap ul li{float: left;width: 620px;}
	.wap ol{position: absolute;right:10px;bottom: 20px;}
	.wap ol li{float: left;width: 16px;height: 16px;border:1px solid #fff;margin-left:3px;text-align: center;line-height: 16px;font-size: 12px;color:#fff; cursor: pointer;}

	.wap ol li.selected{background-color: #00ffff;color: #000;}
	</style>

	<script language="javascript" src="js/jquery-1.11.1.js"></script>
	<script type="text/javascript">
	$(function(){
		// 新建定时器处理滑动
		var i = 0
		var numBtn = $('.wap ol li');
		var picObj = $('.wap ul');
		var picWidth = $('.wap ul li').eq(0).width();
		var slidePic = null;


		slidePic = setInterval(function(){
			movePic();
		},1500)

		
		numBtn.click(function(event) {
			$(this).addClass('selected').siblings().removeClass();

			var picNum = $(this).index();
			console.log("picNum= "+picNum);
			picObj.animate({top: 0, left: -picWidth * picNum },500);

			i = picNum;
		});

		function movePic(){
			if(i>numBtn.size()-1)
			{
				i = 0;
				picObj.css({
					'left': '0',
					'top': '0'
				});
			}
			picObj.animate({top: 0, left: -620 * i },500)
			numBtn.eq(i).addClass('selected').siblings().removeClass();
			i ++;
		}

		$('.wap').mouseover(function(event) {
			clearInterval(slidePic);
		});

		$('.wap').mouseout(function(event) {
			slidePic = setInterval(function(){

				movePic();
			},2000)
		});



	})
	</script>
</head>
<body>
	<div class="wap">
		<ul>
			<li><img src="images/pic1.jpg" alt="" /></li>
			<li><img src="images/pic2.jpg" alt="" /></li>
			<li><img src="images/pic3.jpg" alt="" /></li>
			<li><img src="images/pic4.jpg" alt="" /></li>
		</ul>
		<ol>
			<li class="selected">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ol>
	</div>
</body>
</html>